<template>
  <van-pull-refresh v-model="refLoading" @refresh="onRefresh">
    <div class="box">
      <div class="tbox">
        <div class="t1">
          {{ walletInfo.fuel?.balance }} RYZ
        </div>
        <!-- <div class="t2">≈$ {{ walletInfo.fuel?.balance }}</div> -->
        <div class="t3">
          <!-- <div class="t3-item" style="background: #36b4ea;color:#fff;" @click="handleTrans">燃油包</div> -->
          <div class="t3-item" @click="handleTrans2" style="background: #36b4ea;color:#fff;">转账</div>
        </div>
      </div>
      <div class="obox">
        <!-- <div class="otitle">
          <div class="o1">燃油币明细</div>
          <van-icon name="filter-o" class="rlimg" @click="timeShow = true"/>

          <span class="rlfont" v-show="startDate"
            >{{ showTime[0] }}-{{ showTime[1] }}</span
          >
        </div>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
          :immediate-check="false"
        >
          <div class="libox" v-for="(item, index) in fuelList" :key="index">
            <card-item :propItems="fuelPropItems" :detail="item"></card-item>
          </div>
        </van-list> -->
        <van-tabs
          v-model:active="tabIndex"
          sticky
          shrink
          title-inactive-color="#878B97"
          title-active-color="#000"
          color="#000"
          line-width="20px"
          background="#fff"
        >
          <van-tab title="消耗明细">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList1"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in fuelList"
                :key="index"
              >
                <card-item
                  :propItems="fuelPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="购买记录">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList2"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in rechargeList"
                :key="index"
              >
                <card-item
                  :propItems="rechargePropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab>
          <van-tab title="转账记录">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="getTabList3"
              :immediate-check="false"
            >
              <div
                class="libox"
                v-for="(item, index) in withdrawalList"
                :key="index"
              >
                <card-item
                  :propItems="withdrawalPropItems"
                  :detail="item"
                ></card-item>
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-calendar
      :min-date="new Date(new Date().getTime() - 180 * 24 * 60 * 60 * 1000)"
      v-model:show="timeShow"
      type="range"
      @confirm="onConfirm"
    />
  </van-pull-refresh>
</template>
      
<script setup lang='ts'>
import CardItem from "@/components/CardItem/index.vue";
import { reactive, ref, computed, onMounted ,defineExpose,watch } from "vue";
import { useStore } from "@/store";
import { formatDate } from "@/utils/common";
import { useRouter } from "vue-router";
import http from "@/utils/http";
import { Toast } from "vant";
const store = useStore();
const router = useRouter();
const walletInfo = computed(() => store.state.users.wallet);
const fuelList = ref<any[]>([]);
  const rechargeList = ref<any[]>([]);
    const withdrawalList = ref<any[]>([]);

  
const loading = ref(false);
const finished = ref(false);
const pageIndex = ref(1);
const pageSize = ref(200);
const tabIndex = ref(0)

// onMounted(() => {
//   pageIndex.value = 1;
//   // getList()
// });
const getList = (index: number) => {
  switch (index) {
    case 0:
      getTabList1();
      break;
    case 1:
      getTabList2();
      break;
    case 2:
      getTabList3();
      break;
  }
};
const refLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    Toast("刷新成功");
    resetList();
    store.dispatch("users/getUserWalletInfo");
    refLoading.value = false;
  }, 1000);
};
const resetList = () => {
  pageIndex.value = 1;
  showTime.value = ["", ""];
  startDate.value = "";
  endDate.value = "";
  getList(tabIndex.value);
};
const startDate = ref("");
const endDate = ref("");
const showTime = ref(["", ""]);
const timeShow = ref(false);
const onConfirm = (values: any) => {
  const [start, end] = values;
  timeShow.value = false;
  startDate.value = formatDate(start, "yyyy-MM-dd") + " 00:00:00";
  endDate.value = formatDate(end, "yyyy-MM-dd") + " 00:00:00";
  pageIndex.value = 1;
  const xx1 = startDate.value.split(" ")[0].split("-");
  const xx2 = endDate.value.split(" ")[0].split("-");
  showTime.value = [xx1[1] + "/" + xx1[2], xx2[1] + "/" + xx2[2]];
  console.log(showTime.value);
  getList(tabIndex.value);
};
const getTabList1 = () => {
  http
    .post("user/fuel_consume/app/page", {
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
    })
    .then((res: any) => {
      if (res.code === 0) {
        if (pageIndex.value === 1) {
          fuelList.value = res.data.records;
        } else {
          fuelList.value = fuelList.value.concat(res.data.records);
        }
        loading.value = false;
        pageIndex.value++;
        if (fuelList.value.length >= res.data.total) {
          finished.value = true;
        }
      }
    });
};
const getTabList2 = ()=>{
  http
    .post("user/transfer_detailed/app/page", {
      type:0,
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      // type: 1, //操作类型( 0 资金转燃料  1 燃料转资金 )
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
    })
    .then((res: any) => {
      if (res.code === 0) {
        let zdata = res.data.records
        // .map((v: any) => {
        //   if (v.type === "资金转燃料") {
        //     v.from = "资金账户";
        //     v.to = "燃油币账户";
        //   } else {
        //     v.from = "燃油币账户";
        //     v.to = "资金账户";
        //   }
        //   return v;
        // });
        if (pageIndex.value === 1) {
          rechargeList.value = zdata;
        } else {
          rechargeList.value = rechargeList.value.concat(zdata);
        }
        loading.value = false;
        if (rechargeList.value.length >= res.data.total) {
          finished.value = true;
        }
      }
    });
}
const getTabList3 = ()=>{
  http
    .post("user/transfer_detailed/app/page", {
      type:1,
      current: pageIndex.value, //页数
      size: pageSize.value, //每页条数
      // type: 1, //操作类型( 0 资金转燃料  1 燃料转资金 )
      startTime: startDate.value, //开始时间
      endTime: endDate.value, //结束时间
    })
    .then((res: any) => {
      if (res.code === 0) {
        let zdata = res.data.records
        // .map((v: any) => {
        //   if (v.type === "资金转燃料") {
        //     v.from = "资金账户";
        //     v.to = "燃油币账户";
        //   } else {
        //     v.from = "燃油币账户";
        //     v.to = "资金账户";
        //   }
        //   return v;
        // });
        if (pageIndex.value === 1) {
          withdrawalList.value = zdata;
        } else {
          withdrawalList.value = withdrawalList.value.concat(zdata);
        }
        loading.value = false;
        if (withdrawalList.value.length >= res.data.total) {
          finished.value = true;
        }
      }
    });
}
const fuelPropItems = reactive([
  {
    name: "订单号",
    prop: "orderId",
  },
  {
    name: "策略",
    prop: "strategyName",
  },
  {
    name: "燃烧数量",
    prop: "fuelQuantity",
  },
  {
    name: "消耗类型",
    prop: "type",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);
const rechargePropItems = reactive([
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "燃油值数量",
    prop: "quantity",
  },
  {
    name: "套餐名称",
    prop: "fuelSetMeal",
  },
  {
    name: "贡献值",
    prop: "contributionValue",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);
const withdrawalPropItems = reactive([
  // {
  //   name: "币种",
  //   prop: "currency",
  // },
  {
    name: "目标用户ID",
    prop: "toUserId",
  },
  {
    name: "来源用户ID",
    prop: "userId",
  },
  {
    name: "燃油值数量",
    prop: "quantity",
  },
  {
    name: "类型",
    prop: "type",
  },
  {
    name: "时间",
    prop: "createTime",
  },
]);
const handleTrans = () => {
  router.push({
    path: "/capital/transfer",
    query: {
      active: 1,
    },
  });
};
const handleTrans2 = () => {
  router.push("/capital/transfer2");
};
watch(
  tabIndex,
  (newVal, oldVal) => {
    pageIndex.value = 1;
    showTime.value = ["", ""];
    startDate.value = "";
    endDate.value = "";
    resetList();
    // getList(newVal);
  },
  {
    immediate: true,
  }
);
defineExpose({
  getList
});
</script>
      
  <style lang="scss" scoped>
.box {
  padding: 10px 0 14px;
  .tbox {
    padding: 20px 24px 10px;
    .t1 {
      font-size: 22px;
      font-weight: 600;
      color: #000;
    }
    .t2 {
      font-size: 12px;
      color: #878b97;
      margin: 12px 0 22px;
    }
    .t3 {
      display: flex;
      justify-content: space-between;
      margin-top:32px;
      .t3-item {
        flex:1;
        height: 34px;
        line-height: 34px;
        background: #f1f1f1;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        font-size: 13px;
        // &:first-child{
        //   margin-right:20px;
        // }
      }
    }
  }
}
.obox {
  position: relative;
  .otitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #36b4ea;
    font-size: 15px;
    height: 30px;
    padding: 0 20px;
  }
  .rlimg {
    width: 22px;
    font-size: 22px;
    color:#000;
  }
  .rlfont {
    position: absolute;
    color: #000;
    right: 15px;
    top: 36px;
    font-weight: 600;
    font-size: 10px;
    transform: scale(0.8);
    z-index: 999;
  }
}
.libox {
  padding: 10px 20px;
  border-bottom: 1px solid #f1f1f1;
}
</style>